<template>
    <div class="containerCode">
        <span>定位</span>
        <a-select style="width: 100%" v-model="setting.position" :getPopupContainer="p=>p.parentNode"
                  allowClear>
            <a-select-option v-for="obj in position" :value="obj.value">
                {{ obj.label }}
            </a-select-option>
        </a-select>
        <div class="containerCode-content" style="margin-top: 15px">
            <div style="margin-right: 15px">
                <div>左边距</div>
                <a-input-number v-model="setting.left"/>
            </div>
            <div>
                <div>上边距</div>
                <a-input-number v-model="setting.top"/>
            </div>
        </div>
        <div v-if="setting.position=='relative'" class="containerCode-content">
            <div style="flex: 1;margin-right: 15px">
                <div>右边距</div>
                <a-input-number v-model="setting.right"/>
            </div>
            <div style="flex: 1">
                <div>位置</div>
                <a-select style="width: 100%" v-model="setting.textAlign" :getPopupContainer="p=>p.parentNode"
                          allowClear>
                    <a-select-option v-for="obj in textAlignList" :value="obj.value">
                        {{ obj.label }}
                    </a-select-option>
                </a-select>
            </div>
        </div>
        <span>内边距</span>
        <div class="containerCode-content">
            <div style="margin-right: 15px;flex: 1">
                <div>上</div>
                <a-input-number v-model="setting.paddingTop" :min="1"/>
            </div>
            <div style="flex: 1">
                <div>下</div>
                <a-input-number v-model="setting.paddingBottom" :min="1"/>
            </div>
        </div>
        <div class="containerCode-content">
            <div style="margin-right: 15px;flex: 1">
                <div>左</div>
                <a-input-number v-model="setting.paddingLeft" :min="1"/>
            </div>
            <div style="flex: 1">
                <div>右</div>
                <a-input-number v-model="setting.paddingRight" :min="1"/>
            </div>
        </div>
        <div class="containerCode-content">
            <div style="margin-right: 15px;flex: 1">
                <div>高度</div>
                <a-input-number v-model="setting.height" :min="1"/>
            </div>
            <div style="flex: 1">
                <div>宽度</div>
                <a-input-number v-model="setting.width" :min="1"/>
            </div>
        </div>
        <div class="containerCode-content">
            <div style="margin-right: 15px;flex: 1">
                <span>边框颜色</span>
                <a-input v-model="setting.borderColor" class="labeinput_list"  type="color"/>
            </div>
            <div style="flex: 1">
                <span>边框宽度</span>
                <a-input-number v-model="setting.borderWidth" :min="1"/>
            </div>
         </div>
        <div class="containerCode-content">
            <div style="flex: 1">
                <span>边框圆角</span>
                <a-input-number style="width: 100%" v-model="setting.borderCorner" :min="1"/>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "containerCode",
    props:{
        //配置数据
        setting:{
            type:Object
        },
    },
    data(){
        return{
            textAlignList:[
                {
                    label: '左',
                    value: 'left'
                }, {
                    label: '中',
                    value: 'center'
                },{
                    label: '右',
                    value: 'right'
                }
            ],
            position:[
                {
                    label: '相对定位',
                    value: 'relative'
                }, {
                    label: '绝对定位',
                    value: 'absolute'
                }
            ]
        }
    }
}
</script>

<style scoped>
.containerCode-content{
    display: flex;
    margin-bottom: 15px;
}
</style>